<#include "/common/head.ftl">

<@showTitle title="${i18n.getMessage('bookstore.order')} > ${i18n.getMessage('create_one')}">
	<a href="#" onclick="cc('bookstore/showSearchOrder.sgt')">${i18n.getMessage('search')}</a>
</@showTitle>

<div id="error" style="display:none"></div>

<form action="bookstore/createOrder.sgt" validator="bookstore/validateOrder.sgt" onsubmit="submitFormValidation(this); return false;" onreset="$('error').hide()">
	<table id="dataTable" cellspacing="5" cellpadding="0" align="center">
		<tr>
			<td class="name">${i18n.getMessage('level')}:</td>
			<td>
				<select id="levelId" name="levelId" style="width:205px">
					<option></option>
					<#list programs as program>
						${request.setAttribute("levels", program.levels)}
						<optgroup label="${program.name}">
							<#list levels as lev>
								<option value="${lev.id}" <#if lev == (level)!>selected</#if>>${lev.name}</option>
							</#list>
						</optgroup>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('offering')}:</td>
			<td>
				<select id="offeringId" name="offeringId" style="width:205px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('student')}:</td>
			<td>
				<select id="memberId" name="memberId" style="width:205px" onchange="updateStudentName(this)">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name"><@required/>${i18n.getMessage('student.name')}:</td>
			<td><input type="text" name="studentName" style="width:200px"/></td>
		</tr>
		<tr>
			<td class="name"><@required/>${i18n.getMessage('date')}:</td>
			<td>
				<input type="text" name="date" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].date, '${i18n.getMessage('format.date')}', this)"/>
			</td>
		</tr>
		<tr>
			<td class="name"><@required/>${i18n.getMessage('user')}:</td>
			<td>
				<select name="userId" style="width:204px">
					<option></option>
					<#list users as user>
						<option value="${(user.id)!}" <#if user == action.USER()>selected</#if>>${(user.fullName)!}</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name" style="vertical-align:top">${i18n.getMessage('comment')}:</td>
			<td><textarea name="comment" style="width:350px;height:80px;"></textarea></td>
		</tr>
		<tr>
			<td class="name"></td>
			<td>
				<input type="submit" value="${i18n.getMessage('next')}" class="button_style"/> 
				<input type="reset" value="${i18n.getMessage('reset')}" class="button_style"/> 
			</td>
		</tr>
	</table>
</form>

<@ajax.select baseUrl="leveloffering.view" source="levelId" target="offeringId"
	parameters="levelId={levelId}"/>
	
<@ajax.select baseUrl="OfferingMemberSearch.view" source="offeringId" target="memberId"
	parameters="offeringId={offeringId}"/>
	
<script>
	updateStudentName = function(obj) {
		var name = obj.form.memberId;
		var studentName = obj.form.studentName;		
		studentName.value = name.options[name.selectedIndex].innerHTML;
	}
</script>